<template>
  <div class="system-dic-dialog-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
      <!--			<el-alert title="半成品，交互过于复杂，请自行扩展！" type="warning" :closable="false" class="mb20"> </el-alert>-->
      <el-form ref="dicDialogFormRef" :disabled="state.dialog.disabled" :model="state.ruleForm" size="default"
               :rules="state.rules"
               label-width="90px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="字典名称" prop="typeName">
              <el-input v-model="state.ruleForm.typeName" placeholder="请输入字典名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="字段名" prop="typeCode">
              <el-input v-model="state.ruleForm.typeCode" placeholder="请输入字段名"
                        clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="字典状态" prop="status">
              <el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" :active-value="1"
                         inactive-text="禁" :inactive-value="0"
                         @click="onSwitchChange(state.ruleForm.status)"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-row :gutter="35" v-for="(v, k) in state.ruleForm.dictValueVoList" :key="k">
              <el-col :xs="18" :sm="9" :md="9" :lg="9" :xl="9" class="mb20">
                <el-form-item :prop="`list[${k}].label`">
                  <template #label>
                    <el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
                      <el-icon>
                        <ele-Plus/>
                      </el-icon>
                    </el-button>
                    <el-button type="danger" circle size="small" :disabled="state.dialog.type === 'edit'"
                               @click="onDelRow(k)" v-else>
                      <el-icon>
                        <ele-Delete/>
                      </el-icon>
                    </el-button>
                    <span class="ml10">字段</span>
                  </template>
                  <el-input v-model="v.dictLabel" style="width: 100%" placeholder="请输入字段名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="18" :sm="9" :md="9" :lg="9" :xl="9" class="mb20">
                <el-form-item label="属性" :prop="`list[${k}].value`" label-width="40">
                  <el-input v-model="v.dictValue" style="width: 100%" placeholder="请输入属性值"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="8" :sm="4" :md="4" :lg="4" :xl="4" class="mb20">
                <el-form-item label="状态" :prop="`list[${k}].status`" label-width="40">
                  <el-switch v-model="v.status" inline-prompt active-text="启" :active-value="1" inactive-text="禁"
                             :inactive-value="0"></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="字典描述">
              <el-input v-model="state.ruleForm.remark" type="textarea" placeholder="请输入字典描述"
                        maxlength="150"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button v-if="state.dialog.type !== 'detail'" type="primary" @click="onSubmit(dicDialogFormRef)"
                     size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="systemDicDialog">
import {reactive, ref} from 'vue';
import {FormInstance} from "element-plus";

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const dicDialogFormRef = ref();
const state = reactive({
  ruleForm: {
    typeName: '', // 字典名称
    typeCode: '', // 字段名
    status: true, // 字典状态
    remark: '', // 字典描述
    dictValueVoList: [] as ListType[], // 子集字段 + 属性值
    describe: '', // 字典描述
  } as RowDicType,
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
    disabled: false
  },
  dialogData: {} as RowDicType,
  rules: {
    typeName: [
      {required: true, message: '请输入字典名称', trigger: 'blur'},
      {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'},
    ],
    typeCode: [
      {required: true, message: '请输入字段名', trigger: 'blur'},
      {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'},
   ],
  }
});

// 打开弹窗
const openDialog = (type: string, row: RowDicType) => {
  if (type === 'edit') {
    // if (row.fieldName === 'SYS_UERINFO') {
    // 	row.list = [
    // 		{ id: Math.random(), label: 'sex', value: '1' },
    // 		{ id: Math.random(), label: 'sex', value: '0' },
    // 	];
    // } else {
    // 	row.list = [
    // 		{ id: Math.random(), label: 'role', value: 'admin' },
    // 		{ id: Math.random(), label: 'role', value: 'common' },
    // 		{ id: Math.random(), label: 'roleName', value: '超级管理员' },
    // 		{ id: Math.random(), label: 'roleName', value: '普通用户' },
    // 	];
    // }

    state.ruleForm = JSON.parse(JSON.stringify(row));
    state.dialog.title = '修改字典';
    state.dialog.type = 'edit'
    state.dialog.submitTxt = '修 改';
    state.dialog.disabled = false;
  } else if (type === 'detail') {
    state.ruleForm = JSON.parse(JSON.stringify(row));
    state.dialog.title = '字典详情';
    state.dialog.type = 'detail'
    state.dialog.submitTxt = '关 闭';
    state.dialog.disabled = true;
  } else {
    state.ruleForm = reactive<RowDicType>({
      dictValueVoList: [{
        dictId: '',
        dictLabel: '',
        dictValue: '',
        isDefault: '',
        remark: '',
        status: ''
      }] as ListType[]
    } as RowDicType);
    state.dialog.title = '新增字典';
    state.dialog.submitTxt = '新 增';
    state.dialog.disabled = false;
    state.dialog.type = 'insert'
    // 清空表单，此项需加表单验证才能使用
    // nextTick(() => {
    // 	dicDialogFormRef.value.resetFields();
    // });
  }
  state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid: boolean) => {
    if (valid) {
      closeDialog();
      emit('refresh', state.ruleForm);
    } else {
      return false;
    }
  });
  // if (state.dialog.type === 'add') { }
};
// 新增行
const onAddRow = () => {
  state.ruleForm.dictValueVoList.push({
    id: Math.random(),
    label: '',
    value: '',
  });
};
// 删除行
const onDelRow = (k: number) => {
  state.ruleForm.dictValueVoList.splice(k, 1);
};
// 修改启用禁用效果
const onSwitchChange = (val: number) => {
  state.ruleForm.dictValueVoList.forEach((v: ListType) => {
    v.status = val ? 1 : 0;
  })
};
// 暴露变量
defineExpose({
  openDialog,
});
</script>
